/**
 * 策略价格走势图
 */
import React  from 'react'
import style from './index.less'
import { IECharts} from '../../../../../components'

const PriceChart=({
	data
})=>{
	const xData=data.xaixs.data,
				myData=data.data
		const myProps= {
			option: {
				color:['#4990e2','#4fb8ff','#a990ff'],
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					// orient: 'vertical',
					// left: 'right',
					top: '5%',
					right:'5%',
					data: myData.map((item,i)=>item.name)
				},
				grid: {
					left: '3%',
					right: '5%',
					// bottom: '10%',
					// top:'5%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: xData,
					axisTick: {
						alignWithLabel: true,
						show:false
					},
					axisLine:{
						show:false
					}
				},
				yAxis: {
					type: 'value',
					min: function(value) {
							return  value.min
					},
					max: function(value) {
							return value.max
					},
					axisTick: {
						alignWithLabel: true,
						show:false
					},
					axisLine:{
						show:false
					}
				},
				dataZoom: [
					{
							type: 'slider',
							start: 0,
							end: 29
					}
				],
				series:myData.map((item,i)=>{
					if(item.style=='line'){
						return ({
							name:item.name,
							type: 'line',
							data: item.data,
							symbol:"circle",
							// stack:'总量',
							symbolSize:8,
							lineStyle:{
								normal:{
									width:2
								},
								emphasis:{
									width:2
								}
							}
						})
					}else if(item.style=='step'){
						return({
							name:item.name,
							type: 'line',
							step:'start',
							data: item.data,
							symbol:"circle",
							symbolSize:8,
							lineStyle:{
								normal:{
									width:2,
									type:'dashed'
								},
								emphasis:{
									width:2,
									type:'dashed'
								}
							}
						})
					}
				})
			}
	  }

	return (
		<div className={`chart ${style.priceChart}`}>
			<IECharts {...myProps} resizable={true}/>
		</div>
	)

}

PriceChart.propTypes={
	// data
}

export default PriceChart
